Spacing 間距

Grouping 分組

分組是把相關內容放在一起，如圖片和標題，便於理解。

Explicit Grouping 顯性分組

透過視覺化邊界（Visual Boundaries）組織元素：

• 輪廓（Outlines）用邊框區分元件

• 分隔線（Dividers） 用線條分隔列表項

• 陰影（Shadows） 用投影突出分組

• 列表項（List Items） 用分隔線表示可點選或滑動

• 卡片（Cards） 整體可點選的圖文組合

顯式分組還可以表明某個專案是可互動的，比如位於分隔線之間的列表項，或者展示圖片及其說明文字的卡片。

Implicit Grouping 隱性分組

隱式分組不需要邊框或線條，而是用“靠近”和“空白”讓相關內容看起來是一組。比如，標題、副標題和圖片放在一起，使用者自然知道它們是有關的。輪播圖裡的圖片因為靠在一起，所以看起來是一組的。

Margin 邊距

邊距是指視窗區域邊緣與該視窗區域內元素之間的空白區域。

邊距的寬度可以固定或自動調整，在較大的螢幕上，邊距通常更寬，以提供更多空白區域，使內容不會顯得過於緊湊。邊距會在不同的分界點（Breakpoints）變化，確保在不同裝置上的視覺一致性。

Spacer 間隔

是兩個面板（Pane）之間的間距，用於保持佈局的清晰度。Material Design 規定間隔的預設寬度為 24dp。

間隔裡可以加一個拖動手柄，讓使用者調整面板大小，手柄的觸控區域會稍微延伸到面板上。

Padding 內邊距

內邊距是 UI 元件內部的空白區域，預設按 4dp 遞增，可以是水平的，也可以是垂直的。